<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优惠券-用户列表</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/business.css">
</head>
<body>
<div id="uniocn" class="layui-layout layui-layout-admin">
    <div class="layui-tab layui-tab-brief" style="background: #fff">
        <ul class="layui-tab-title list-ul">
            <li :class="[navIndex==-1?'layui-this':'']" @click="navLi(-1)">全部<span class="layui-badge nav-li">{{list.length}}</span>
            </li>
            <li :class="[navIndex==index?'layui-this':'']" @click="navLi(index)" v-for="(item,index) in nav">
                {{item.name}}
                <span class="layui-badge nav-li">{{record[item.id].list.length}}</span>
            </li>
        </ul>
    </div>
    <div class="formBox">
        <form action="##" class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <select name="Keyword" lay-verify="required">
                        <option value="">选择一级分类</option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
                <button class="layui-btn layui-btn-primary" style="float: right">添加优惠券</button>
            </div>
        </form>
    </div>
    <div class="finance-record">
        <table class="layui-table">
            <colgroup>
                <col width="5%">
                <col width="15%">
                <col width="10%">
                <col width="15%">
                <col width="15%">
                <col width="10%">
                <col width="10%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <th>序号</th>
                <th>优惠券内容</th>
                <th>已售/库存</th>
                <th>所属商家</th>
                <th>类型</th>
                <th>介绍</th>
                <th>价格</th>
                <th>状态</th>
                <th>有效时间</th>
            </tr>
            </thead>
        </table>
        <table class="layui-table" v-if="navIndex==-1 || navIndex == item.state" v-for="(item,index) in list">
            <colgroup>
                <col width="5%">
                <col width="15%">
                <col width="10%">
                <col width="15%">
                <col width="15%">
                <col width="10%">
                <col width="10%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <td colspan="2">用户查询</td>
                <td colspan="7">
                    <div class="operation">
                        <a href="javascript:;" @click="Route(index)">小程序路径</a>-
                        <a href="javascript:;" @click="copy(index)">复制卡劵</a>-
                        <a href="javascript:;" @click="copyHref(index)">复制链接</a>-
                        <a href="javascript:;" @click="operationstate(index)">使失效</a>-
                        <a href="">编辑</a>
                    </div>
                </td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>{{item.number}}</td>
                <td>
                    <div class="coupon-title">
                        <p class="titleImg"><img :src="item.titleImg" alt=""></p>
                        <p>
                            <span>{{item.title}}</span><br>
                        </p>
                    </div>
                </td>
                <td>{{item.Sold}}/{{item.Stock}}</td>
                <td>
                    <p>
                        <span>{{item.businessInfo}}</span><br>
                    </p>
                </td>
                <td>

                    <div>
                        <button class="layui-btn layui-btn-primary layui-btn-sm"
                                style="background: #5FB878;color: #fff;">折扣劵
                        </button>
                    </div>
                </td>
                <td>
                    <a href="javascript:;" style="color: #00bfff;" @click="seeDetails">查看详情</a>
                </td>
                <td>
                    <div>
                        <button class="layui-btn layui-btn-primary layui-btn-sm"
                                style="background: #5FB878;color: #fff;">{{item.price}}
                        </button>
                    </div>
                </td>
                <td>
                    <div>
                        <button v-if="item.state==0" class="layui-btn layui-btn-primary layui-btn-xs btnBg">销售中
                        </button>
                        <button v-if="item.state==1" class="layui-btn layui-btn-primary layui-btn-xs btnBg">下架中
                        </button>
                        <button v-if="item.state==2" class="layui-btn layui-btn-primary layui-btn-xs btnBg">审核中
                        </button>
                        <button v-if="item.state==3" class="layui-btn layui-btn-primary layui-btn-xs btnBg">已失效
                        </button>
                        <button v-if="item.state==4" class="layui-btn layui-btn-primary layui-btn-xs btnBg">未通过
                        </button>
                    </div>
                </td>
                <td>
                    <div>领取后的天数:{{item.days}}</div>
                </td>
            </tr>

            </tbody>
        </table>
        <div style="display: flex;justify-content: space-between;margin-top: 30px">
            <div id="test1"></div>
        </div>
    </div>
</div>
<div id="details" style="display: none;">
    <p class="com-details">这是详情</p>
    <h3>使用须知</h3>
    <p class="Notes">须知</p>
</div>
<script src="layui/layui.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script>
    layui.use(['form', 'layer', 'laypage'], function () {
        var form = layui.form;
        var element = layui.element;
        var layer = layui.layer;
        var laypage = layui.laypage;

        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: 50 //数据总数，从服务端得到
        });
    })
    new Vue({
        el: "#uniocn",
        data: {
            record: [  // 0销售中  1下架中  2审核中   3已失效  4未通过
                {
                    id: 0,
                    navLi: "销售",
                    list: [{
                        choose: false,
                        number: "2",
                        Sold: "50",
                        Stock: "100",
                        title: "代金券",
                        titleImg: "./images/temporary.jpg",
                        code: "1245",
                        businessInfo: "用户信息",
                        price: "免费",
                        Extract: '0.5%',
                        days: "20",
                        state: 0,
                    }, {
                        choose: false,
                        number: "2",
                        Sold: "50",
                        Stock: "100",
                        title: "代金券",
                        titleImg: "./images/temporary.jpg",
                        code: "1245",
                        businessInfo: "用户信息",
                        price: "免费",
                        Extract: '0.5%',
                        days: "20",
                        state: 0,
                    }]
                }, {
                    id: 1,
                    navLi: "下架",
                    list: [{
                        choose: false,
                        number: "2",
                        Sold: "50",
                        Stock: "100",
                        title: "代金券",
                        titleImg: "./images/temporary.jpg",
                        code: "1245",
                        businessInfo: "用户信息",
                        price: "免费",
                        Extract: '0.5%',
                        days: "20",
                        state: 1,
                    }, {
                        choose: false,
                        number: "2",
                        Sold: "50",
                        Stock: "100",
                        title: "代金券",
                        titleImg: "./images/temporary.jpg",
                        code: "1245",
                        businessInfo: "用户信息",
                        price: "免费",
                        Extract: '0.5%',
                        days: "20",
                        state: 1,
                    }]
                }, {
                    id: 2,
                    navLi: "审核",
                    list: [{
                        choose: false,
                        number: "2",
                        Sold: "50",
                        Stock: "100",
                        title: "代金券",
                        titleImg: "./images/temporary.jpg",
                        code: "1245",
                        businessInfo: "用户信息",
                        price: "免费",
                        Extract: '0.5%',
                        days: "20",
                        state: 2,
                    }]
                }, {
                    id: 3,
                    navLi: "失效",
                    list: [{
                        choose: false,
                        number: "2",
                        Sold: "50",
                        Stock: "100",
                        title: "代金券",
                        titleImg: "./images/temporary.jpg",
                        code: "1245",
                        businessInfo: "用户信息",
                        price: "免费",
                        Extract: '0.5%',
                        days: "20",
                        state: 3,
                    }]
                }, {
                    id: 4,
                    navLi: "未通过",
                    list: [{
                        choose: false,
                        number: "2",
                        Sold: "50",
                        Stock: "100",
                        title: "代金券",
                        titleImg: "./images/temporary.jpg",
                        code: "1245",
                        businessInfo: "用户信息",
                        price: "免费",
                        Extract: '0.5%',
                        days: "20",
                        state: 4,
                    }]
                },
            ],
            nav: [],
            navIndex: -1,
            len: 0,
            list: [],
        },

        mounted: function () {
            this.navItem();
        },
        methods: {
            //获取nav
            navItem: function () {
                var that = this;
                for (var i = 0, len = that.record.length; i < len; i++) {
                    if (that.record[i].navLi) {
                        that.nav.push({
                            name: that.record[i].navLi,
                            id: that.record[i].id
                        });
                    }
                    for (var j = 0, leng = that.record[i].list.length; j < leng; j++) {
                        that.list.push(that.record[i].list[j])
                    }
                }
            },
            navLi: function (index) {
                this.navIndex = index;
            },
            //查看详情
            seeDetails: function () {
                layer.open({
                    title: "卡劵详情",
                    type: 1,
                    area: ['420px', '260px'], //宽高
                    content: $("#details"),
                    btn:"确认"
                });
            },
            //小程序路径
            Route: function (index) {
                layer.msg('复制成功' + index)
            },
            //复制卡卷
            copy: function (index) {
                layer.confirm('确认复制该活动？被复制的优惠券会标记禁用', {
                    btn: ['确认', '取消']
                }, function () {
                    layer.msg('确认' + index)
                }, function () {
                    layer.msg('取消' + index)
                })
            },
            //复制链接
            copyHref: function (index) {
                layer.msg('复制成功' + index)
            },
            //失效
            operationstate: function (index) {
                layer.confirm('确定让这组优惠券失效?', {
                    title: "失效后将导致该优惠券无法被领取和编辑",
                    btn: ['确认', '取消']
                }, function () {
                    layer.msg('确认' + index)
                }, function () {
                    layer.msg('取消' + index)
                })
            }
        }
    })
</script>
</body>
</html>
